Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -> 模板 ( Templates ) -> 頁面 ( Pages )

常見版型 ( Section ) 有哪些 ?

• 單欄式設計
• 兩欄式設計
  • 不對稱設計
  • 交錯式設計
• 多欄式設計
  • 卡片式設計
  • 雜誌設計

單欄式設計

將主要內容單獨垂直呈現。簡單且讓使用者方便瀏覽的版型。只需要向下滾動就可以瀏覽更多內容

兩欄式設計

將主要畫面一分為二，等分的版型適合有兩邊同樣重要的內容，可以再變化成不對稱與交錯式的切分版型

不對稱設計

不對稱版型可以帶來視覺張力，不僅能吸引使用者的注意力，還能引導使用者的視覺動線。

交錯式設計

連續的 Z 字型排版，能夠帶給介面節奏感，並順著引導使用者的視覺動線。

多欄式設計

常見會分成三或四個欄位 ( 讓使用者較好吸收理解資訊的範圍 )，適合用在重點敘述的區間，也有彈性能依需求增減。

卡片式設計

卡片式的設計能夠乘載多樣化的資訊，幫助使用者找到適合的內容，再透過點擊卡片了解細節。適合用在內容龐大的網站。

雜誌排版

雜誌形式的排版，模擬現實的報章雜誌，透過字體、圖片等元素的尺寸來決定各個內容的重要層級，進而引導使用者的視覺動線。

好! 下一篇我們會進入原子設計，第四階段模板 ( Templates ) : )
I miss you, Elaine.
Everybody's Gotta Learn Sometimes